import React, { PureComponent } from 'react';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import macarons from './macarons';

echarts.registerTheme('macarons', macarons);

class EChart extends PureComponent {
  onEvents = {};
  option = {};
  constructor(props) {
    super(props);
    const { onClick = void 0 } = props;
    this.onEvents.click = onClick;
  }

  render() {
    const { option = {}, type } = this.props;
    const { series } = option;
    let height = 300;

    if (type === 'pie' && series.length >= 2) {
      if (series.lenght > 5) {
        series.length = 5;
      }
      height = 250 * series.length;
    }

    return (
      <ReactEcharts
        theme="macarons"
        option={option}
        notMerge={true}
        style={{ height: `${height}px` }}
        onEvents={this.onEvents}
      />
    );
  }
}

export default EChart;
